



<template>
	<div class="container">
		<!-- 面包屑导航栏 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 模糊搜索框 -->
		<el-row>
			<!-- form表单行内表单 -->
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="状态:">
					 <el-radio-group v-model="radio1" @change="Select">
					      <el-radio-button label="all">全部商品</el-radio-button>
					      <el-radio-button label="up">上架中</el-radio-button>
					      <el-radio-button label="down">下架中</el-radio-button>
					    </el-radio-group>
				</el-form-item>
				<el-form-item label="商品名称:">
					<el-input v-model="queryInfo.goodsName" placeholder="请输入商品名称"></el-input>
				</el-form-item>
				<el-form-item label="发布日期:">
					<div class="block">
						<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getGoods">搜索</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		
		<!-- 表格内容 -->
		<el-table :data="list" border style="width: 100%;margin-top: 20px;"
			:header-cell-style="{backgroundColor:'#eee'}" show-overflow-tooltip>
			<el-table-column prop="bulkGoodsId" label="商品ID" align="center">
			</el-table-column>
			<el-table-column prop="bulkGoodsName" label="商品名字" width="180" align="center">
			</el-table-column>
			<el-table-column prop="goodsOrigin" label="原产地" width="180" align="center">
			</el-table-column>
			<el-table-column prop="bulkGoodsSalePrice" label="售卖价" align="center">
			</el-table-column>
			<el-table-column prop="bulkGoodsPurchasePrice" label="采购价" align="center">
			</el-table-column>
			<el-table-column prop="goodsRemainingInventory" label="总库存" align="center">
			</el-table-column>
			<el-table-column prop="bulkGoodsInventory" label="剩余库存" align="center">
			</el-table-column>
			<el-table-column prop="salesVolume" label="销量" align="center">
			</el-table-column>
			<el-table-column prop="virtualSales" label="虚拟销量" align="center">
			</el-table-column>
			<el-table-column prop="buyMinLimit" label="起购数" align="center">
			</el-table-column>
			<el-table-column prop="buyLimit" label="限购数" align="center">
			</el-table-column>
			<el-table-column prop="addTime" label="添加时间" align="center">
			</el-table-column>
			<el-table-column prop="bulkGoodsStatus" label="状态" align="center">
			</el-table-column>
			<el-table-column prop="buyStartTime" label="定时上架时间" align="center">
			</el-table-column>
			<el-table-column prop="buyEndTime" label="抢购结束时间" align="center">
			</el-table-column>
			<!-- <el-table-column prop="goodsStatus" label="状态" align="center">
				<template slot-scope="scope">
					<span 
					:style="{  backgroundColor: scope.row.goodsStatus === 1 ? '#E7FAF0' : '#FFEDED', color: scope.row.goodsStatus === 1 ? '#13CE66' : '#FF4949', padding: '5px 10px' }
					">
						{{ scope.row.goodsStatus === 1 ? '上架中' : '已下架' }}
					</span>
				</template>
			</el-table-column> -->
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<!-- <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button> -->
					<el-button type="text" @click="upORdown(scope.row)">
						<template>
							{{ scope.row.bulkGoodsStatus === 1 ? '立即下架' : '立即上架' }}
						</template>
					</el-button>
					<el-button type="text" v-if="scope.row.bulkGoodsStatus === 1" @click="changeUpTime(row)">修改上架时间</el-button>
					<el-button type="text" v-if="scope.row.bulkGoodsStatus === 1" @click="changeBuytime(row)">修改抢购时间</el-button>
					<el-button type="text">修改虚拟销量</el-button>
					<el-button type="text">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- Form 添加信息的嵌套的表单-->
		<!-- title；对话框的名称 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="postData">
				<el-form-item label="驿站名字" label-width="100px">
					<el-input placeholder="请输入驿站名字" v-model="postData.courierStationName" autocomplete="off"></el-input>
				</el-form-item>
		
				<el-form-item label="所属地区" label-width="100px">
					<el-cascader v-model="address" :options="citys"></el-cascader>
					<!-- <el-cascader placeholder="请选择省市区" v-model="address" :options="citys"></el-cascader> -->
				</el-form-item>
		
				<el-form-item label="" label-width="100px">
					<el-input placeholder="请输入详细地址" v-model="postData.courierStationAddress"
						autocomplete="off"></el-input>
				</el-form-item>
				<!-- <el-form-item label="所属小区" label-width="100px">
					<el-input placeholder="所在小区" v-model="postData.courierStationCommunityId" autocomplete="off"></el-input>
				</el-form-item> -->
				<el-form-item label="所属小区" label-width="100px">
					<el-autocomplete class="inline-input" v-model="selectedCommunityName"
						:fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"
						value-key="communityName"></el-autocomplete>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirmForm">确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				queryInfo:{
					pageNum:1,
					pageSize:10,
					goodsName:'',
					bulkGoodsStatus: '',
					shopName: '',
					startTime: '',
					endTime: ''
				},
				total: 0, // 总数据条数
				// 使用数组来保存日期范围，仅用于内部状态同步
				date: '',
				list: [],
				radio1:'all'
			}
		},
		methods:{
			//	获取表格数据
			getGoods(pageNum = 1, pageSize = 10) {
				this.$http.get('bulkGoods/querySearchBulkGoodsList', {
						params: this.queryInfo
					})
					.then((res) => {
						console.log(res);
						this.total = res.data.data.total
						this.list = res.data.data.list
						// console.log(res.data.data.list);
					})
			},
			changeUpTime(row){
				this.$http.post('modifyBulkGoods',{
					bulkGoodsId:row.bulkGoodsId,
					buyStartTime:row.buyStartTime
				})
				.then((res=>{
					if(this.data.status == 200){
						alert("yes")
						
					}
				}))
			},
			changeBuyTime(row){
				
			},
			//	上下架切换
			upORdown(row){
				row.bulkGoodsStatus = row.bulkGoodsStatus === 1 ? 0 :1
			},
			//	状态绑定事件
			Select(val){
				if(val == 'up'){this.queryInfo.bulkGoodsStatus = 1}
				else if(val == 'down'){this.queryInfo.bulkGoodsStatus = 0}
				else {this.queryInfo.bulkGoodsStatus = ''}
				console.log('xixix');
				this.getGoods()
			}
		},
		//	记载表格信息
		mounted(){
			this.getGoods()
		},
		watch:{
			//	要求名称必须和变量名保持一致
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
		}
	}
</script>

<style>
</style>